
import React from 'react'
import ReactDOM from 'react-dom'
import * as SuggestionAction  from '../../actions/SuggestionAction';
import { connect }  from 'react-redux';

import SuggestionSettingTools from './SuggestionSettingTools'
import SuggestionSettingList from './SuggestionSettingList'
import SuggestionSettingEdit from './SuggestionSettingEdit'
import SuggestionReplyEdit from './SuggestionReplyEdit'

import Paging from '../Paging'

class SuggestionSettingBody extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      activeData: {},
      all: false
    }
  }

  componentDidMount() {
    var self = this;
    this.$modal = $(ReactDOM.findDOMNode(this.refs.SuggestionSettingEdit))
    this.$replyModal = $(ReactDOM.findDOMNode(this.refs.SuggestionReplyEdit))
    this.props.dispatch(
      SuggestionAction.loadSuggestionDataAsync({
        all: false
      })
    )
  }

  componentDidUpdate() {
    // console.log(this.props.data)
  }

  onAllCheckChanged(all) {
    this.setState({
      all: all
    })

    this.props.dispatch(
      SuggestionAction.loadSuggestionDataAsync({
        offset: 0,
        limit: this.props.limit,
        all: all
      })
    )
  }


  onReplyClick(data){
    var self = this;
    this.props.dispatch(
      SuggestionAction.querySuggestionDataAsync({
        suggestion_id: data.id
      })
    )
    this.setState({
      activeData: data
    })

    this.$replyModal.modal("show")
  }

  onReplySubmit(data){
    data.offset = this.props.offset
    data.limit = this.props.limit
    data.all = this.state.all
    this.props.dispatch(
      SuggestionAction.replySuggestionDataAsync(data)
    )
    this.$replyModal.modal("hide")
  }

  onUpdateReply(data){
    data.offset = this.props.offset
    data.limit = this.props.limit
    data.all = this.state.all
    this.props.dispatch(
      SuggestionAction.replyUpdateDataAsync(data)
    )
    this.$replyModal.modal("hide")
  }



  onPageChange(page) {
    var self = this;
    this.props.dispatch(
      SuggestionAction.loadSuggestionDataAsync({
        offset: (page-1)*this.props.limit,
        limit: self.props.limit,
        all: this.state.all
      })
    )
  }




  render() {
    var self = this;

    var offset = parseInt(this.props.offset),
        limit = parseInt(this.props.limit),
        count = parseInt(this.props.count)

    var current = Math.ceil(offset/limit) + 1;

    return (
      <div className="content-body Suggestion-content-body" >
        <SuggestionSettingTools
          onAllCheckChanged = {this.onAllCheckChanged.bind(self)}
          />
        <SuggestionSettingList
          data = {this.props.data}
          onReplyClick = {this.onReplyClick.bind(self)}
          />
        <SuggestionReplyEdit ref="SuggestionReplyEdit"
          data = {this.state.activeData}
          sysuser = {this.props.sysuser}
          onReplySubmit = {this.onReplySubmit.bind(self)}
          onUpdateReply = {this.onUpdateReply.bind(self)}
          />
        <Paging
          current = {current}
          count = {count}
          limit = {limit}
          onPageChange = {this.onPageChange.bind(self)}
        />

      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  // console.log(state.suggestions);
  return {
    suggestions: state.suggestions,
    data: state.suggestions.data,
    offset: state.suggestions.offset,
    limit: state.suggestions.limit,
    count: state.suggestions.count,
    suggestionReply: state.suggestionReply.data
  }
}

export default connect(mapStateToProps)(SuggestionSettingBody);
